<script setup lang="ts">
import { useAppStore } from '@/stores';

const appStore = useAppStore();

// 使用 computed 来响应式获取数据
const menus = computed(() => appStore.menus);
const permissions = computed(() => appStore.permissions);
const dicts = computed(() => appStore.dicts);
const agents = computed(() => appStore.agents);
const mergedRoutes = computed(() => appStore.mergedRoutes);
</script>

<template>
  <div class="app-data-example">
    <h3>应用数据示例</h3>

    <div class="data-section">
      <h4>菜单数据 ({{ menus.length }} 项)</h4>
      <pre>{{ JSON.stringify(menus, null, 2) }}</pre>
    </div>

    <div class="data-section">
      <h4>权限数据 ({{ permissions.length }} 项)</h4>
      <pre>{{ JSON.stringify(permissions, null, 2) }}</pre>
    </div>

    <div class="data-section">
      <h4>字典数据 ({{ dicts.length }} 项)</h4>
      <pre>{{ JSON.stringify(dicts, null, 2) }}</pre>
    </div>

    <div class="data-section">
      <h4>智能体数据 ({{ agents.length }} 项)</h4>
      <pre>{{ JSON.stringify(agents, null, 2) }}</pre>
    </div>

    <div class="data-section">
      <h4>合并路由 ({{ mergedRoutes.length }} 项)</h4>
      <pre>{{ JSON.stringify(mergedRoutes, null, 2) }}</pre>
    </div>
  </div>
</template>

<style scoped>
.app-data-example {
    padding: 20px;
}

.data-section {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
}

.data-section h4 {
    margin-top: 0;
    color: #409eff;
}

pre {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    max-height: 200px;
    font-size: 12px;
}
</style>
